{% extends "base.html" %}

{% block title %}使用指南 - 作文智能评阅系统{% endblock %}

{% block header %}使用指南{% endblock %}

{% block styles %}
<style>
    .guide-container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 2rem;
        position: relative;
    }

    .guide-section {
        max-width: 900px;
        margin-right: 240px;
        background: white;
        padding: 2rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        margin-bottom: 2rem;
    }

    .guide-nav {
        position: fixed;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        z-index: 100;
        width: 200px;
    }

    .guide-nav:hover {
        opacity: 1;
        background: white;
    }

    .guide-nav:not(:hover) {
        opacity: 0.8;
    }

    .guide-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .guide-nav li {
        margin-bottom: 0.5rem;
    }

    .guide-nav a {
        color: var(--secondary-color);
        text-decoration: none;
        padding: 0.5rem;
        display: block;
        transition: background-color 0.3s ease;
        border-radius: var(--border-radius);
    }

    .guide-nav a:hover {
        background-color: rgba(74, 144, 226, 0.1);
    }

    .guide-content {
        line-height: 1.8;
    }

    .guide-content h2 {
        color: var(--secondary-color);
        margin-top: 0;
    }

    .guide-content p {
        margin-bottom: 1.5rem;
        color: #444;
    }

    .step-list {
        list-style: none;
        padding: 0;
        counter-reset: step-counter;
    }

    .step-item {
        margin-bottom: 2rem;
        padding-left: 3rem;
        position: relative;
    }

    .step-item::before {
        content: counter(step-counter);
        counter-increment: step-counter;
        position: absolute;
        left: 0;
        top: 0;
        width: 2rem;
        height: 2rem;
        background: var(--primary-color);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .guide-image {
        max-width: 100%;
        border-radius: var(--border-radius);
        margin: 1rem 0;
        box-shadow: var(--box-shadow);
    }

    @media (max-width: 1200px) {
        .guide-nav {
            display: none;
        }
        
        .guide-section {
            margin-right: 0;
            max-width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="guide-container">
    <div class="guide-nav">
        <ul>
            <li><a href="#getting-started">快速开始</a></li>
            <li><a href="#features">功能介绍</a></li>
            <li><a href="#tips">使用技巧</a></li>
            <li><a href="#faq">常见问题</a></li>
        </ul>
    </div>

    <div class="guide-section" id="getting-started">
        <div class="guide-content">
            <h2>快速开始</h2>
            <ol class="step-list">
                <li class="step-item">
                    <h3>注册账号</h3>
                    <p>点击右上角的"注册"按钮，填写基本信息（用户名、邮箱、密码）完成注册。系统会自动发送验证邮件到您的邮箱，请及时验证。</p>
                    <img src="{{ url_for('static', filename='images/guide/robot.jpg') }}" alt="注册示意图" class="guide-image">
                </li>
                <li class="step-item">
                    <h3>选择年级和主题</h3>
                    <p>在首页选择对应的年级（小学、初中、高中）和作文主题。系统会根据不同年级调整评分标准，确保评分的准确性和针对性。</p>
                </li>
                <li class="step-item">
                    <h3>提交作文</h3>
                    <p>将作文粘贴到文本框中，或使用语音输入功能。系统支持实时保存草稿，避免意外丢失内容。完成后点击"开始评阅"按钮。</p>
                </li>
            </ol>
        </div>
    </div>

    <div class="guide-section" id="features">
        <div class="guide-content">
            <h2>功能介绍</h2>
            <div class="step-list">
                <div class="step-item">
                    <h3>智能评分</h3>
                    <p>系统采用先进的自然语言处理技术，从多个维度对作文进行评分：</p>
                    <ul>
                        <li>内容立意（主题把握、思想深度）</li>
                        <li>结构布局（层次分明、条理清晰）</li>
                        <li>语言表达（用词准确、句式多样）</li>
                        <li>书写规范（标点符号、错别字检查）</li>
                    </ul>
                </div>
                <div class="step-item">
                    <h3>个性化分析</h3>
                    <p>每篇作文都会获得详细的评价报告，包括：</p>
                    <ul>
                        <li>优秀亮点标注</li>
                        <li>具体改进建议</li>
                        <li>相似优秀范文推荐</li>
                        <li>写作技巧指导</li>
                    </ul>
                </div>
                <div class="step-item">
                    <h3>进步追踪</h3>
                    <p>系统会记录您的每次评阅历史，通过数据分析展示：</p>
                    <ul>
                        <li>分数变化趋势</li>
                        <li>各维度能力发展</li>
                        <li>写作水平提升报告</li>
                        <li>个性化学习建议</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="guide-section" id="tips">
        <div class="guide-content">
            <h2>使用技巧</h2>
            <div class="step-list">
                <div class="step-item">
                    <h3>获得更准确的评分</h3>
                    <ul>
                        <li>确保文章主题明确，中心思想突出</li>
                        <li>注意段落划分，每段都要有明确的中心句</li>
                        <li>使用恰当的过渡语句，使文章更流畅</li>
                        <li>避免重复用词，适当使用优美的词句</li>
                    </ul>
                </div>
                <div class="step-item">
                    <h3>充分利用系统功能</h3>
                    <ul>
                        <li>定期查看进步报告，了解自己的优势和不足</li>
                        <li>参考系统推荐的优秀范文，学习写作技巧</li>
                        <li>保存评阅历史，方便后期复习和对比</li>
                        <li>使用语音输入功能，提高写作效率</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="guide-section" id="faq">
        <div class="guide-content">
            <h2>常见问题</h2>
            <div class="step-list">
                <div class="step-item">
                    <h3>评分标准是什么？</h3>
                    <p>系统采用教育部最新的作文评分标准，结合人工智能技术，确保评分的科学性和权威性。不同年级会采用不同的评分权重。</p>
                </div>
                <div class="step-item">
                    <h3>如何导出评阅报告？</h3>
                    <p>在评阅结果页面，点击"导出报告"按钮，可以将评阅结果导出为PDF格式，方便保存和打印。</p>
                </div>
                <div class="step-item">
                    <h3>系统支持哪些文件格式？</h3>
                    <p>目前支持直接输入文本和复制粘贴。计划后续支持Word文档(.docx)和PDF文件的导入功能。</p>
                </div>
                <div class="step-item">
                    <h3>评阅需要多长时间？</h3>
                    <p>一般情况下，系统会在30秒内完成评阅。如遇网络繁忙，最长不超过2分钟。</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/guide.js') }}"></script>
{% endblock %} 